<!-- 清罐 -->
<template>
  <div class="wrap">
    <div class="main">
      <mt-search style="height: 1.2rem;" v-model="searchValue"></mt-search>
      <mt-loadmore :autoFill='false' :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
        <ul>
          <li v-for="item in searchList" >
            <div  class="address">
              <div class="left">
                <img src="../../../static/images/icon/contact.png" />
              </div>
              <div class="right">
                <div class="name">{{item.name}}</div>
                <div class="position">{{item.position}}</div>
                <div class="tel">{{item.tel}}</div>
              </div>
            </div>
          </li>
        </ul>
      </mt-loadmore>
    </div>
  </div>

</template>
<script>
  import {
    Loadmore
  } from 'mint-ui';
  export default {
    data() {
      return {
        useInfo: {},
        allLoaded: false, //用来判断数据是否加载完毕,为true的时候,上拉将不再加载数据
        searchValue: '',
        addressDetail: [],
        page_no: 0,
        page_size: 10,
      }
    },
    component:{Loadmore},
    methods: {
      loadTop() { //下拉刷新事件
        var params = {
          page_no: 1,
          page_size: this.addressDetail.length,
        }
        this.$api.post('/wechat/getContacts', params, (data) => {
          this.addressDetail = data.obj.list;
          this.$refs.loadmore.onTopLoaded();
        })
      },
      loadBottom() { //上拉加载事件
        this.page_no += 1;
        this.getAddress();
      },
      getAddress() { //获取通讯录列表
        var params = {
          page_no: this.page_no,
          page_size: this.page_size,
        }
        console.log('params',params);
        this.$api.post('/wechat/getContacts', params, (data) => {
          console.log(JSON.parse(JSON.stringify(data)));
          if (data.obj.list.length > 0) {
            data.obj.list.forEach(element => {
              this.addressDetail.push(element);
            });
          };
          if (data.obj.list.length < 10) {
            this.allLoaded = true; //长度小于10说明没数据了,不需要下拉加载了
          }
          this.$refs.loadmore.onBottomLoaded();//重新定位下拉加载组件高度
        })
      }
    },
    created() {
      this.useInfo = JSON.parse(sessionStorage.getItem("loginData"));
      this.page_no += 1;
      this.getAddress();
    },
    computed: {
      searchList: function () {
        var array = [];
        if (this.searchValue) {
          this.addressDetail.forEach(element => {
            if (element.name.indexOf(this.searchValue) != -1 || element.position.indexOf(this.searchValue) != -1 ||
            element.tel&&element.tel.indexOf(this.searchValue) != -1) {
              array.push(element);
            }
          })
        } else {
          array = this.addressDetail;
        }
        return array;
      },
    }
  }

</script>
<style scoped>
  .row {
    display: flex;
    display: -webkit-flex;
    /* Safari */
    height: 1rem;
  }

  .row .left {
    width: 2.5rem;
    text-align: right;
    line-height: 0.9rem;
    height: 0.9rem;
  }

  .row .right {
    width: 6rem;
    margin-left: 0.2rem;
    text-align: left;
  }

  .row .right input {
    height: 0.9rem;
    line-height: 0.9rem;
    padding-left: 0.1rem;
    border: none;
    outline: none;
    width: 100%;
    border-bottom: 1px solid #ccc;
  }

  .address {
    display: flex;
    height: 2rem;
    display: -webkit-flex;
    /* Safari */
    ;
    justify-content: space-between;
    border-bottom: 1px solid #f2f2f2;
  }

  .address .left {
    width: 3rem;
  }

  .address .left img {
    width: 1.5rem;
  }

  .address .right {
    width: auto;
    min-width: 2rem;
    display: flex;
    padding-top: 0.1rem;
    padding-right: 0.3rem;
    text-align: right;
    display: -webkit-flex;
    /* Safari */
    ;
    flex-direction: column;
    line-height: 0.6rem;
  }

  .tel {
    color: chocolate
  }

</style>
